import React from 'react'
import { Input, Select, DatePicker, Space, Button, Row, Col } from 'antd'
import { SearchOutlined } from '@ant-design/icons';
import Tabs from '../../../components/afterLoan/tabs'
import List from '../../../components/afterLoan/List';
import { Link } from 'react-router-dom';
import Bread from '../../../components/Bread';

const { Option } = Select
const { RangePicker } = DatePicker;

const columns1 = [
  {
    title: '借款编号',
    dataIndex: 'borrow_num',
  },
  {
    title: '姓名',
    dataIndex: 'name',
  },
  {
    title: '合同号',
    dataIndex: 'contract_num',
  },
  {
    title: '申请日期',
    dataIndex: 'application_date',
  },
  {
    title: '申请额度',
    dataIndex: 'application_quota',
  },
  {
    title: '审批金额',
    dataIndex: 'approval_money',
  },
  {
    title: '合同金额',
    dataIndex: 'contract_money',
  },
  {
    title: '借款期限',
    dataIndex: 'borrow_term',
  },
  {
    title: '贷款类型',
    dataIndex: 'loan_type',
  },
  {
    title: '还款方式',
    dataIndex: 'payment_method',
  },
  {
    title: '是否放款',
    dataIndex: 'isLoan'
  },
  {
    title: '放款时间',
    dataIndex: 'loan_time',
  },
  {
    title: '放款方式',
    dataIndex: 'loan_method',
  },
  {
    title: '状态',
    dataIndex: 'status',
  },
  {
    title: '操作',
    key: 'action',
    render: (text, record) => (
      <Space>
        <Link to={
          {
            pathname: "/home/afterloan/prepaymentcheck",
            name: record.name,
            state: 1
          }
        }>查看</Link>
        <Link to={
          {
            pathname: "/home/afterloan/prepaymentcheck",
            name: record.name,
            state: 2
          }
        }>提前还款办理</Link>
      </Space>
    )
  }
];

const columns2 = [
  {
    title: '借款编号',
    dataIndex: 'borrow_num',
  },
  {
    title: '姓名',
    dataIndex: 'name',
  },
  {
    title: '合同号',
    dataIndex: 'contract_num',
  },
  {
    title: '申请日期',
    dataIndex: 'application_date',
  },
  {
    title: '申请额度',
    dataIndex: 'application_quota',
  },
  {
    title: '审批金额',
    dataIndex: 'approval_money',
  },
  {
    title: '合同金额',
    dataIndex: 'contract_money',
  },
  {
    title: '借款期限',
    dataIndex: 'borrow_term',
  },
  {
    title: '贷款类型',
    dataIndex: 'loan_type',
  },
  {
    title: '还款方式',
    dataIndex: 'payment_method',
  },
  {
    title: '是否放款',
    dataIndex: 'isLoan',
  },
  {
    title: '放款时间',
    dataIndex: 'loan_time',
  },
  {
    title: '放款方式',
    dataIndex: 'loan_method',
  },
  {
    title: '状态',
    dataIndex: 'status',
  },
  {
    title: '操作',
    key: 'action',
    render: (text, record) => (
      <Space>
        <Link to={
          {
            pathname: "/home/afterloan/prepaymentcheck",
            name: record.name,
            state: 3
          }
        }>查看</Link>
        <Link to={
          {
            pathname: "/home/afterloan/prepaymentcheck",
            name: record.name,
            state: 4
          }
        }>提前还款确认</Link>
      </Space>
    )
  }
];

const data1 = [];
for (let i = 0; i < 46; i++) {
  data1.push({
    borrow_num: i,
    key: i,
    name: `Edward King ${i}`,
    contract_num: i,
    application_date: '2021-12-28',
    application_quota: 500000,
    approval_money: 40000,
    contract_money: 40000,
    borrow_term: 12,
    loan_type: '个人信用',
    payment_method: '等本等息',
    isLoan: '已放款',
    loan_time: '2021-12-28',
    loan_method: '线下放款',
    status: '还款中'
  });
}

const data2 = [];
for (let i = 0; i < 46; i++) {
  data2.push({
    borrow_num: i,
    key: i,
    name: `Edward King ${i}`,
    contract_num: i,
    application_date: '2021-12-28',
    application_quota: 500000,
    approval_money: 40000,
    contract_money: 40000,
    borrow_term: 12,
    loan_type: '个人信用',
    payment_method: '等本等息',
    isLoan: '已放款',
    loan_time: '2021-12-28',
    loan_method: '线下放款',
    status: '还款中'
  });
}

export default function PrePayment() {
  const Search = (
    <div className='after-search'>
      <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
        <Col className="gutter-row" span={4}>
          <div>
            <Input placeholder="姓名" />
          </div>
        </Col>
        <Col className="gutter-row" span={4}>
          <div>
            <Input placeholder="手机号" />
          </div>
        </Col>
        <Col className="gutter-row" span={3}>
          <div>
            <Select
              showSearch
              placeholder="贷款类型"
              optionFilterProp="children"
              filterOption={(input, option) =>
                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
              }
            >
              <Option value="jack">Jack</Option>
              <Option value="lucy">Lucy</Option>
              <Option value="tom">Tom</Option>
            </Select>
          </div>
        </Col>
        <Col className="gutter-row" span={7}>
          <div>
            <Space direction="vertical" size={12}>
              <RangePicker />
            </Space>
          </div>
        </Col>
        <Col className="gutter-row" span={4}>
          <div>
            <Button icon={<SearchOutlined />} type='button' >
              查询
            </Button>
          </div>
        </Col>
      </Row>
    </div>
  )
  return (
    <div className='pre-payment'>
      <Bread bread_title1="贷后管理" bread_title2="提前还款" />
      <Tabs
        tab1="提前还款办理"
        tab2="提前还款确认"
        List1={<List columns={columns1} data={data1} isExportBtn={true} />}
        List2={<List columns={columns2} data={data2} isExportBtn={true} />}
        Search={Search}
      />
    </div>
  )
}
